<template>
  <div class="brand">
    <div class="panelWrap">
      <div class="title flex flexac flexjcsb fs14 cfff fwb pl p-r-20">
        <div>添加</div>
        <i class="el-icon-close" @click="handleCloseDialog" />
      </div>

      <div class="con flexdc flexcenter">
        <div class="con-row m-t-20">
          <div class="flex flexac con-brand">
            <span class="name"><span class="mustval">*</span>地产品牌名称：</span>
            <div class="pre">
              <el-input v-model="data.name" class="brand-input" placeholder="请输入地产品牌名称..." />
            </div>
          </div>
        </div>
        <div class="con-row m-t-20">
          <div class="flex flexac con-brand">
            <span class="name"><span class="mustval">*</span>品牌简称：</span>
            <div class="pre">
              <el-input v-model="data.nameSimple" class="brand-input" placeholder="请输入地产品牌简称..." />
            </div>
          </div>
        </div>
        <div class="con-row">
          <div class="flex flexac m-t-40">
            <span class="area-name">备注：</span>
            <el-input
              v-model="data.remark"
              :autosize="{ minRows: 4, maxRows: 5}"
              resize="none"
              type="textarea"
              class="area-input"
              placeholder="请输入备注信息..."
            />

          </div>
        </div>
      </div>

      <div class="flexcenter footerBtn m-t-50">
        <el-button v-if="!isEdit" class="saveBtn btn m-r-30 el-icon-circle-check" @click="handleSave(0)">保 存</el-button>
        <el-button v-else type="success" class="m-r-30 btn el-icon-circle-check" @click="handleSave(1)">更 新</el-button>
        <el-button class="clsoeBtn btn el-icon-circle-close" @click="handleCloseDialog">关 闭</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { createAdd, updateArticle} from '@/api/baseInfo/landbrand'
import { showNotice } from '@/utils/toolclass'

export default {
  props: {
    data: {
      type: Object,
      default: () => ({})
    },
    isEdit: {
      type: Boolean
    }
  },
  data() {
    return {}
  },
  watch: {
    editFactory: {
      deep: true, // 深度监听
      handler(newVal, oldVal) {
        console.log(newVal, oldVal)
      }
    }
  },
  created() {

  },
  methods: {
    handleSave(t) {
      if (!(/^\S+$/.test(this.data.name))) {
        showNotice('error', '提示', '请输入地产品牌名称')
        return
      }
      if (!(/^\S+$/.test(this.data.nameSimple))) {
        showNotice('error', '提示', '请输入地产品牌简称')
        return
      }
      if (t === 0) {
        this.handleCreateAdd(this.data)
      } else {
        this.handleUpdate(this.data)
      }
    },
    // 新增电梯品牌
    handleCreateAdd(data) {
      createAdd(data).then((res) => {
        if (res.code === '000000') {
          showNotice('success', '提示', '保存成功!')
          this.$emit('handleRefresh')
          this.$emit('handleCloseDialog')
        }
      })
    },
    // 修改电梯品牌
    handleUpdate(data) {
      updateArticle(data).then((res) => {
        if (res.code === '000000') {
          showNotice('success', '提示', '保存成功!')
          this.$emit('handleRefresh')
          this.$emit('handleCloseDialog')
        }
      })
    },
    handleCloseDialog() {
      this.$emit('handleCloseDialog')
      this.$emit('handleRefresh')
    }
  }
}
</script>

<style rel='stylesheet/scss' lang='scss'>
@import '@/styles/public.scss';
.brand {
  width: 600px;
  min-height: 500px;
  background-color: #f5f5f5;
  border-radius: 5px;
  margin: 0 auto;
  .con {
    padding-top: 16px;
  }
  p {
    width: 100%;
    height: 0;
    text-align: center;
    margin: 12px 0 10px -50px;
  }
  .selBtn {
     right: 0;
     top: 0;
     height: 30px;
     line-height: 5px;
  }
  .panelWrap {
    min-height: 500px;
  }
  .con-row {
    padding: 10px 0 0 0;
    .con-brand {
      margin-left: -80px;
    }
    .name {
      width: 120px;
      text-align: right;
    }
    .input {
      margin-left: 3px;
    }
    .area-name {
      margin-top: -66px;
    }
    .area-input {
      width: 260px;
    }
    .el-textarea__inner {
      padding: 5px 0;
    }
    .brand-input {
      width: 260px;
    }
  }
  .footerBtn {
    .btn {
      width: 100px;
      height: 40px;
    }
  }
}
</style>
